<template>
	<el-dialog 
		title="新增权限" 
		:visible.sync="showAddNew" 
		width="30%" 
		:before-close="handleClose">
		<el-form :model="permissionInfo" :rules="rules" ref="permissionInfo">
			<table>
				<tr>
					<td class="title">权限名称</td>
					<td class="content">
						<el-form-item prop="permissionName">
							<el-input v-model="permissionInfo.permissionName"></el-input>
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td class="title">父级权限</td>
					<td class="content">
						{{parentDesc}}
					</td>
				</tr>
				<tr>
					<td class="title">权限描述</td>
					<td class="content">
						<el-form-item prop="permissionDesc">
							<el-input v-model="permissionInfo.permissionDesc"></el-input>
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td class="title">排列序号</td>
					<td class="content">
						<el-form-item prop="sortNum">
							<el-input v-model="permissionInfo.sortNum"></el-input>
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td class="title">权限等级</td>
					<td class="content">
						<el-select v-model="permissionInfo.permissionLeve" placeholder="请选择">
							<el-option 
								v-for="item in 5" 
								:key="item" 
								:label="item" 
								:value="item">
							</el-option>
						</el-select>
					</td>
				</tr>
			</table>
		</el-form>
		<span slot="footer" class="dialog-footer">
    	<el-button @click="handleClose">取 消</el-button>
    	<el-button type="primary" @click="addNewOne">确 定</el-button>
  	</span>
	</el-dialog>
</template>

<script>
	export default {
		props: ['showAddNew',"parentid",'parentDesc'],
		data() {
			// 自定义的验证规则
			var checkNum = (rule, value, callBack) => {
				var re = /[^0-9]/ig;
				//如果为true则表示输入的内容中有非数字,则直接提示错误
				if(re.test(value)) {
					return callBack(new Error('请输入正确数字'));
				}
				callBack();
			}
			return {
				permissionInfo: {},
				rules: {
					permissionName: [{
							required: true,
							message: '请输入权限名称',
							trigger: 'blur'
						},
						{
							min: 2,
							message: '名称最少两个字符',
							trigger: 'blur'
						}
					],
					permissionDesc: [{
							required: true,
							message: '请输入权限描述',
							trigger: 'blur'
						},
						{
							min: 4,
							message: '描述不能少于4个字',
							trigger: 'blur'
						}
					],
					sortNum: [{
							required: true,
							message: '请输入排序号',
							trigger: 'blur'
						},
						{
							validator: checkNum,
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			handleClose() {
				this.$parent.showAddNew = false;
			},
			addNewOne() {
				this.$refs['permissionInfo'].validate((valid) => {
					if(valid) {
						// 提交新权限
						this.permissionInfo.parentid = this.parentid;
						console.log(this.permissionInfo);
						this.$http.post(this.$apis.addNewPermission, this.permissionInfo)
							.then((resp) => {
								console.log(resp);
							})
					} else {
						console.log('还有未验证通过的');
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>